<template>
  <div v-if="error" class="error-boundary">
    <h2>出错了！</h2>
    <p>{{ error }}</p>
    <el-button type="primary" @click="reload">重试</el-button>
  </div>
  <slot v-else />
</template>

<script setup lang="ts">
import { ref, onErrorCaptured } from 'vue'

const error = ref<Error | null>(null)

onErrorCaptured((err) => {
  error.value = err
  return false
})

const reload = () => {
  error.value = null
  window.location.reload()
}
</script>

<style scoped>
.error-boundary {
  padding: 20px;
  text-align: center;
}
</style> 